<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: guoxiaomin
 * @Email: 1093556028@qq.com
 * @Date: 2019-09-11 12:22:25
 * @LastEditors: guoxiaomin
 * @LastEditTime: 2019-09-11 14:34:26
 -->
<style lang="less" scoped>
.homeBox{
  width: 100%;
  .part1{
    width: 100%;
    height: 13.34rem;
    background: url('../../assets/wap/homebg1@2x.png') no-repeat;
    background-size: 100% 100%;
    .intro{
      padding-top: 1.29rem;
      color: #ffffff;
      text-align: center;
      .p1{
        font-weight: bold;
        font-size: 0.64rem;
        line-height: 0.85rem;
      }
      .p2, .p3{
        font-weight: bold;
        font-size: 0.51rem;
        line-height: 0.85rem;
      }
    }
    .car{
      padding-top: 0.34rem;
      text-align: center;
      img{
        width: 4.75rem;
        height: 3.54rem;
      }
    }
    .contact{
      text-align: center;
      .txtBox{
        width: 2.5rem;
        height: 0.8rem;
        border: 0.02rem solid #FFFFFF;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 2.5rem;
        .icon{
          width: 0.26rem;
          height: 0.38rem;
        }
        .txt{
          color: #ffffff;
          font-size: 0.24rem;
          margin-left: 0.27rem;
        }
      }
      .p1{
        color: #FFFFFF;
        font-size: 0.18rem;
        margin-top: 0.18rem;
      }
    }
  }
  .part2{
    width: 100%;
    height: 5.99rem;
    background: url('../../assets/wap/homebg2@2x.png') no-repeat;
    background-size: 100% 100%;
    .img1Box{
      padding: 0.11rem 0 0 0.77rem;
      img{
        width: 0.47rem;
        height: 0.49rem;
      }
    }
    .cnP{
      color: #333333;
      font-size: 0.48rem;
      font-weight: bold;
      padding: 0.17rem 0 0 0.79rem;
    }
    .enP1{
      padding-top: 0.18rem;
    }
    .enP1, .enP2{
      color: #FFFFFF;
      font-size: 0.3rem;
      line-height: 0.32rem;
      height: 0.32rem;
      padding-left: 0.76rem;
    }
    .goodBox{
      display: flex;
      .left{
        margin-left: 0.78rem;
      }
      .right{
        margin-left: 0.56rem;
      }
      .line{
        padding-top: 0.3rem;
        .cn{
          font-size: 0.3rem;
          font-weight: bold;
          color: #000000;
        }
        .en{
          font-size: 0.24rem;
          color: #ffffff;
          font-weight:400;
          padding-top: 0.1rem;
        }
      }
    }
    .contact{
      display: flex;
      padding-left: 0.75rem;
      align-items: center;
      padding-top: 0.3rem;
      p{
        color: #333333;
        font-size: 0.24rem;
      }
      img{
        width: 0.38rem;
        height: 0.22rem;
        margin: 0.13rem;
      }
    }
  }
  .part3{
    .line{
      display: flex;
      .item{
        width: 50%;
        flex-grow: 1;
        height: 3.71rem;
        position: relative;
        .intro{
          text-align: center;
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 1.28rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          .p2{
            margin-top: 0.12rem;
          }
        }
      }
      .item1{
        background: url('../../assets/wap/homebg3_1@2x.png') no-repeat;
        background-size: 100% 100%;
        .imgBox{
          text-align: center;
          padding-top: 1.23rem;
          img{
            width: 0.76rem;
            height: 0.87rem;
          }
        }
        .intro{
          background:rgba(255,255,255,0.88);
          .p1{
            color: #000000;
            font-size: 0.36rem;
            font-weight: bold;
          }
          .p2{
            color: #000000;
            font-size: 0.28rem;
          }
        }
      }
      .item2{
        background: url('../../assets/wap/homebg3_2@2x.png') no-repeat;
        background-size: 100% 100%;
        .imgBox{
          text-align: center;
          padding-top: 1.15rem;
          img{
            width: 0.98rem;
            height: 0.83rem;
          }
        }
        .intro{
          .p1{
            color: #ffffff;
            font-size: 0.36rem;
            font-weight: bold;
          }
          .p2{
            color: #FFFFFF;
            font-size: 0.28rem;
          }
        }
      }
      .item3{
        background: url('../../assets/wap/homebg3_3@2x.png') no-repeat;
        background-size: 100% 100%;
        .imgBox{
          text-align: center;
          padding-top: 1.29rem;
          img{
            width: 0.84rem;
            height: 0.59rem;
          }
        }
        .intro{
          background:rgba(253,55,26,0.88);
          .p1{
            color: #ffffff;
            font-size: 0.36rem;
            font-weight: bold;
          }
          .p2{
            color: #FFFFFF;
            font-size: 0.28rem;
          }
        }
      }
      .item4{
        background: url('../../assets/wap/homebg3_4@2x.png') no-repeat;
        background-size: 100% 100%;
        .imgBox{
          text-align: center;
          padding-top: 1.24rem;
          img{
            width: 0.88rem;
            height: 0.64rem;
          }
        }
        .intro{
          background:rgba(255,255,255,0.88);
          .p1{
            color: #000000;
            font-size: 0.36rem;
            font-weight: bold;
          }
          .p2{
            color: #000000;
            font-size: 0.28rem;
          }
        }
      }
    }
  }
  .part4{
    width: 100%;
    height: 13.36rem;
    background: url('../../assets/wap/homebg4@2x.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    .askBox{
      padding: 1.02rem 0 0 0.75rem;
      .line{
        width:0.71rem;
        height:0.15rem;
        background:rgba(51,51,51,1);
      }
      .p1{
        color: #333333;
        font-weight: bold;
        font-size: 0.6rem;
        padding-top: 0.26rem;
        margin-left: -0.05rem;
      }
      .p2{
        margin-top: 0.19rem;
      }
      .p2, .p3{
        color: #333333;
        font-size: 0.36rem;
        line-height: 0.48rem;
      }
    }
    .stepsBox{
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 1.46rem 0.52rem 0 0.6rem;
      .step{
        width: 0.8rem;
        height: 0.8rem;
        border: 0.08rem solid #FD371A;
        border-radius: 50%;
        color: #FD371A;
        font-size: 0.36rem;
        font-weight: bold;
        text-align: center;
        line-height: 0.8rem;
        .num{
          width: 100%;
          height: 100%;
        }
        .txt{
          font-size: 0.24rem;
          color: #333333;
          font-weight:bold;
          margin-top: 0.36rem;
          text-align: center;
          white-space : nowrap;
        }
      }
      .line{
        background: #FD371A;
        flex-grow: 1;
        height: 0.08rem;
      }
    }
    .contactUs{
      position: absolute;
      right: 0.38rem;
      bottom: 1.77rem;
      .ctIcon{
        width: 1.97rem;
        height: 0.79rem;
      }
      .phone{
        color: #333333;
        font-size: 0.24rem;
        font-weight: bold;
        width: 1.97rem;
        text-align: center;
        margin-top: 0.13rem;
      }
    }
  }
}
</style>
<template>
<div class="homeBox">
  <transition name="bounce">
    <NavDraw @close='closeClicked' @linked='linkedClicked' v-if="isOpenedNavDraw"></NavDraw>
  </transition>
  <div class="wrap"  v-if="!isOpenedNavDraw">
    <div class="part1">
      <HeaderNav  @openNav='openNavClicked'></HeaderNav>
       <div class="intro">
         <p class="p1">签约客户赎车后</p>
         <p class="p2">即可领取精美伴</p>
         <p class="p3">手礼一份</p>
       </div>
       <div class="car">
         <img src="../../assets/wap/homebg1_car@2x.png" alt="">
       </div>
       <div class="contact">
         <a class="txtBox" href="#/about">
           <img src="../../assets/wap/homebg1_iconSb@2x.png" alt="" class="icon">
           <span class="txt">联系我们</span>
         </a>
         <p class="p1">DING SHENG HENG JI</p>
       </div>
    </div>
    <div class="part2">
       <HeaderNav :logoSelect='2' :txtSelect='2' :navSelect='2' @openNav='openNavClicked' :styleHeight='partNavHeight'></HeaderNav>
       <div class="img1Box">
         <img src="../../assets/wap/homebg2_iocnHg@2x.png" alt="">
       </div>
       <p class="cnP">一站式专业服务</p>
       <p class="enP1">CONVENIENCE</p>
       <p class="enP2">SERVICE</p>
       <div class="goodBox">
         <div class="left">
           <div class="line">
             <p class="cn">专业</p>
             <p class="en">SPECIALITY</p>
           </div>
            <div class="line">
             <p class="cn">高效</p>
             <p class="en">HIGH EFFICIENCY</p>
           </div>
         </div>
         <div class="right">
           <div class="line">
             <p class="cn">安全</p>
             <p class="en">SAFETY</p>
           </div>
            <div class="line">
             <p class="cn">便捷</p>
             <p class="en">CONVENIENT</p>
           </div>
         </div>
       </div>
       <a class="contact" href="#/about">
         <p>联系我们</p>
         <img src="../../assets/wap/homebg2_arrow@2x.png" alt="">
       </a>
    </div>
    <div class="part3">
      <div class="line line1">
        <div class="item item1">
          <div class="imgBox">
            <img src="../../assets/wap/homebg3_1_1@2x.png" alt="">
          </div>
          <div class="intro">
            <p class="p1">门槛低</p>
            <p class="p2">有车就能做</p>
          </div>
        </div>
        <div class="item item2">
          <div class="imgBox">
            <img src="../../assets/wap/homebg3_2_1@2x.png" alt="">
          </div>
          <div class="intro">
            <p class="p1">门槛低</p>
            <p class="p2">有车就能做</p>
          </div>
        </div>
      </div>
      <div class="line line2">
        <div class="item item3">
          <div class="imgBox">
            <img src="../../assets/wap/homebg3_3_1@2x.png" alt="">
          </div>
          <div class="intro">
            <p class="p1">门槛低</p>
            <p class="p2">有车就能做</p>
          </div>
        </div>
        <div class="item item4">
          <div class="imgBox">
            <img src="../../assets/wap/homebg3_4_1@2x.png" alt="">
          </div>
          <div class="intro">
            <p class="p1">门槛低</p>
            <p class="p2">有车就能做</p>
          </div>
        </div>
      </div>
    </div>
    <div class="part4">
       <HeaderNav :logoSelect='2' :txtSelect='2' :navSelect='2' @openNav='openNavClicked' :styleHeight='partNavHeight'></HeaderNav>
       <div class="askBox">
         <div class="line"></div>
         <p class="p1">申请流程</p>
         <p class="p2">APPLICATION</p>
        <p class="p3">PROCESS</p>
       </div>
       <div class="stepsBox">
        <div class="step">
          <p class="num">1</p>
          <p class="txt">电话沟通</p>
        </div>
        <div class="line"></div>
        <div class="step">
          <p class="num">2</p>
          <p class="txt">提交资料</p>
        </div>
        <div class="line"></div>
        <div class="step">
          <p class="num">3</p>
          <p class="txt">签约</p>
        </div>
        <div class="line"></div>
        <div class="step">
          <p class="num">4</p>
          <p class="txt">完成办理</p>
        </div>
      </div>
      <a class="contactUs pointer"  href="#/about">
        <img src="../../assets/web/buttonLx@2x.png" alt="" class="ctIcon">
        <p class="phone">010-87506918</p>
      </a>
    </div>
    <Footer @openNav='openNavClicked'></Footer>
  </div>
</div>
</template>
<script>
import Mixmin from './mixin/same'
export default {
  components: {
  },
  data() {
    return {
      partNavHeight: '0.99rem'
    }
  },
  mixins: [Mixmin]
}
</script>